<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>线下还款</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <style>
        body{
            width: 3.75rem;
        }
        .confirmBtn {
		    position: absolute;
		    margin:.15rem auto;
		    width: 90%;
		    padding: 0 .16rem;
        }
        .submitBtn {
			position: static;
		    margin: .18rem auto .18rem;
		    width: 100%;
		    font-size: .15rem;
		    border-radius: .25rem;
		    background-color: #1EB97E;
        }
        .layer_dialog {
            position: absolute;
            top: 0;
            left: 0;
            height: 500px;
            margin: 0;
            padding: 0;
        }
        .orderContentWrap{
        	background:#ececec ;
        	padding-top: .2rem;
        	position: relative;
        }
        .orderContentWrap::before{
		    content: "";
		    width: 100%;
		    height: 1.5rem;
		    position: absolute;
		    left: 0;
		    top: .31rem;
		    background: url(../img/bigBg.png) no-repeat center;
		    background-size: 100%;
		    z-index: 0;
        }
        .orderContent{
    	    height: 1.6rem;
	        margin: 0 .16rem 0!important;
		    border-radius: .1rem .1rem 0 0;
		    background: -webkit-linear-gradient(left,#11B1B2,#57CD91);
		    position: relative;
        }
        .orderContent .orderTitle {
            width: 1rem;
            height: .2rem;
            line-height: .2rem;
            font-size: .14rem;
            float: left;
        }
        .repaymengtInf .repaymengtInfList {
                height: .2rem;
    			line-height: .2rem;
        }
        .repaymengtInf .repaymengtInfList:nth-child(2n+1) {
            font-weight: 700;
        }
        .repaymengtInfList:nth-child(1){
            padding-top: .1rem;
		}
        .repaymengtInfList:nth-child(2){
            padding-bottom: .14rem;
    		border-bottom: .01rem solid #DFE1E8;
		    font-size: .12rem;
    		color: #5B5C5E;
		}
        .repaymengtInfList:nth-child(3){
            padding-top: .1rem;
		}
        .repaymengtInfList:nth-child(4){
            padding-bottom: .15rem;
            font-size: .12rem;
    		color: #5B5C5E;
		}		
        .repaymengtInf a {
            display: block;
            width: .8rem;
            text-align: center;
            height: .3rem;
            line-height: .3rem;
            background-color: rgb(255,85,78);
            float: right;
            color: white;
            margin: -.4rem 0rem 0 0;
            border-radius: .05rem;
        }
        .orderTips {
            background: #f9f9f9;
            font-size: .12rem;
        }
        .feed_tit1{
        	    padding-top: .2rem;
        }
        .orderTipsLine {
            background: #f9f9f9;
            height: .2rem;
            padding: 0;
        }
        .orderTips a {
            color: rgb(30, 185, 126);
        }
        .orderTips{
			color: #5B5C5E;
		    line-height: .19rem;
		    padding: .18rem .16rem;
		    border-radius: .1rem;
		    background: #E8EFEF;
        }
        .orderNum {
            height: .4rem;
            line-height: .4rem;
            border-bottom: solid .01rem #eee;
        }
        .orderNum a {
            display: block;
            float: left;
            width: .8rem;
        }
        .orderNum i {
		    display: block;
		    float: right;
		    width: .24rem;
		    margin: .125rem 0;
		    height: .24rem;
		    background-image: url(../img/AKYK.png);
		    background-size: 100% 100%;
		    background-repeat: no-repeat;
        }
        .orderList{
        	font-size: .12rem;
        	text-align: center;
        	color: #fff;
        }
		.orderList:nth-child(1) {
		    margin-top: .27rem;
	        margin-bottom: .05rem;
		}   
		.orderList:nth-child(2) span{
		    font-size: .28rem;
		    font-weight: bold;
		    padding-right: .03rem;
		}    
		.orderList:nth-child(3){
			padding-top: .05rem;
		}
		.orderList:nth-child(4){
			padding-top: .24rem;
		}
        .orderNum i img {
            width: 100%;
        }
        .orderNum input {
            width: 1.8rem;
            height: .2rem;
            line-height: .2rem;
            font-size: .14rem;
            padding: .1rem;
            float: left;
            background: transparent;
        }
        .picTitle {
            margin: .15rem 0;
        }
        .feed_tit span{
        	float: right;
        	font-size: .12rem;
    		color: rgb(133,133,133);
        }
        .photo_wap {
            float: left;
            box-sizing: border-box;
            position: relative;
		    width: 0.9rem;
            border-radius: .04rem;
            margin-right: .35rem;
            margin-top: .18rem;
        }
        .photo_wap:nth-child(3){
        	margin-right: 0;
        }
        .photo {
		    position: relative;
		    border-radius: .05rem;
		    width: 0.9rem;
		    height: 0.9rem;
		    overflow: hidden;
		    border: .01rem dashed #BEBEBE;
        }
        .photo img {

        }
        .photo.btn_add_photo{
            /*border: none;*/
        }

        .photo .feed_image_item {
			position: absolute;
		    top: 50%;
		    left: 50%;
		    width: .3rem;
		    height: .3rem;
		    transform: translate(-50%,-50%);
        }
        .photo .photo_img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .photo .photo_upload {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .2);
            z-index: 3;
        }

        .photo .photo_upload .photo_upload_progress {
            position: absolute;
            width: 80%;
            height: auto;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align: center;
        }

        .photo .photo_upload .photo_upload_cancel {
            position: absolute;
            top: .03rem;
            right: .03rem;
            width: .15rem;
            height: .15rem;
            text-align: center;
            background: url(../images/feed_del.png) no-repeat;
            background-size: 100% 100%;

        }

        .photo .photo_upload_bar {
            width: 100%;
            height: 2px;
            border-radius: 1px;
        }

        .photo .photo_upload_bar > i {
            display: block;
            width: 0;
            height: 100%;
            background: #ff6a00;
            -webkit-transition: width .6s 0s ease-out;
            transition: width .6s 0s ease-out;
        }

        .photo .photo_upload_txt {
            padding-top: .08rem;
            font-size: .08rem;
            color: #fff;
        }
        .orderContent,
        .orderTips,
        .repaymengtInf,
        .uploadPic{
            overflow: hidden;
            margin: 0 .16rem;
        }
        .repaymengtInfList>div {
            float: left;
        }
        .repaymengtInfList button {
		    display: inline-block;
		    float: right;
		    font-size: .12rem;
		    font-weight: 400;
		    margin: 0;
		    width: .7rem;
		    height: .3rem;
		    line-height: .3rem;
		    border-radius: .25rem;
		    background-color: #FFB624;
		    color: white;
        }

        /*repayAlert1弹窗*/
        .alert11 {
            /*display: none;*/
        }
        .repayAlert1 {
		    height: 4.7rem;
		    width: 3.43rem;
		    background: #fff;
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-50%);
		    z-index: 33;
		    border-radius: .1rem;
        }

        .alert1List1 {
		    width: 100%;
		    height: .68rem;
		    padding: .2rem 0;
		    border-radius: .1rem .1rem 0 0;
            background: url(../img/repayBg1.png) no-repeat center;
            background-size: 100% 100%;
        }        
        .alert1List2 {
			padding: .14rem .16rem .2rem .16rem;
		    font-weight: 700;
        }        
        .alert1List3 {
		    font-size: .15rem;
		    padding: .23rem .46rem;
		    color: #262626;
        }
        .alert1List3 a {
            color: rgb(30, 185, 126);
        }

        /*repayAlert2弹窗*/
        .alert22 {
            display: none;
        }
        .alert33 {
            display: none;
        }        
        .repayAlert2 {
		    background: #fff;
		    height: auto;
		    width: 3.43rem;
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-40%);
		    z-index: 30;
		    border-radius: .1rem;
		    margin-bottom: .4rem;
        }
        .repayAlert2 img {
            display: block;
            width: 2.5rem;
            margin: 0 auto;
        }
        .repayAlert3 {
		    background: #fff;
		    height: auto;
		    width: 3.43rem;
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-40%);
		    z-index: 30;
		    border-radius: .1rem;
		    margin-bottom: .4rem;
        }
        .repayAlert3 img {
            display: block;
            width: 2.5rem;
            margin: 0 auto;
        }        
        .alert2List1 {
	    	width: 100%;
		    height: .68rem;
		    padding: .2rem 0;
		    border-radius: .1rem .1rem 0 0;
            background: url(../img/repayBg1.png) no-repeat center;
            background-size: 100% 100%;
        }        
        .alert2List2 {
		    padding: .2rem;
		    font-weight: 700;
        }        
        .alert2List3 {
			padding: .2rem .52rem;
		    text-align: left;
		    font-size: .15rem;
		    color: #262626;
        }
        .alert2List4 {
		    padding: .2rem .52rem;
		    text-align: left;
        }
        .repayAlert2 a {
            color: rgb(30, 185, 126);
        }

        .alert1List1 div,
        .alert2List1 div{
    	    font-size: .12rem;
			text-align: center;
			color: #fff;
        }
    	.alert1List1 h6,
        .alert2List1 h6{
    	    font-size: .15rem;
			text-align: center;
			font-weight: bold;
			color: #fff;
        }
        .alert1Img{
    	    display: block;
        	width: 2.5rem;
        	height: 1.57rem;
        	margin: 0 .46rem;
        }
        .next{
			width: 2.85rem;
		    height: .45rem;
		    line-height: .45rem;
		    font-size: .15rem;
		    color: #fff;
		    background: #FFB624;
		    margin: 0 auto .23rem;
		    text-align: center;
		    border-radius: .25rem;
        }
        .layer_dialog .layer_dialog_box {
		    position: fixed;
		    z-index: inherit;
		    width: 3.43rem;
		    height: 3.63rem;
		    top: 50%;
		    left: 50%;
		    -webkit-transform: translate(-50%, -50%);
		    transform: translate(-50%, -50%);
		    background-color: #fff;
		    border-radius: .1rem;
		    overflow: hidden;
		    padding: .15rem 0;
		}
		.alert3List3{
		    width: 2rem;
		    height: .93rem;
		    line-height: .26rem;
		    margin: 0 auto;
		    text-align: center;
		    padding: .33rem;
		    font-size: .15rem;
		}
    </style>
</head>
<body>
    <!-- 蒙版 -->
    <div class="orderContentWrap">
	    <div class="orderContent">
	        <div class="orderList"> 应还款金额</div>
	        <div class="orderList">
	            <span class="orderValue"></span>元
	        </div>        
	        <div class="orderList">
	            <div class="orderValue"></div>
	        </div>
	        <div class="orderList">
	            	编号:<span class="orderValue"></span>
	        </div>        
	    </div>
    </div>
    <!--<div class="orderTipsLine">
        
    </div>-->
    
    <div class="repaymengtInf">
        <div class="repaymengtInfList"><div>42354235345345@qq.com</div>
            <button type="button" id="id_copy"
                    data-clipboard-target=".repaymengtInfList>div"
                    data-clipboard-action="copy">
                    一键复制
            </button>
        </div>    	
        <div class="repaymengtInfList">支付宝账号</div>
		<div class="repaymengtInfList">陕西浦顺金融服务有限公司</div>
        <div class="repaymengtInfList">支付宝名称</div>
        
    </div>
    <div class="orderTips">
        请按账单金额给上述账号转账，并备注您的姓名和注册手机号。为避免转入其它账号，转账时请先进行账号认证；如遇到谨防欺诈提醒，点击【取消】关闭即可。转账成功后上传转账截图提交申请， <a>查看示例</a>
    </div>
    <div class="uploadPic">
        <div class="orderNum">
        	<i></i>
            <input type="text" id="alipayNo" placeholder="请输入还款使用的支付宝账号">
        </div>
    
        <div class="feed_image">
            <div class="feed_tit feed_tit1">上传图片：<span >不超过3张</span>
            </div>
            <div class="photos">
                <div class="photo_wap">
                    <div class="photo btn_add_photo" id="btnAddPhoto">
                        <img class="feed_image_item" src="../img/add.png">
                    </div>
                    <input type="file" accept="image/*" class="upload" id="flContractPhoto" data-name="Contract" />
                </div>
            </div>
        </div>
    </div>
    
    <div class="confirmBtn">
        <div class="submitBtn">
            提交
        </div>
    </div>

    <div class="alert11">
        <div class='layer_mask'></div>
        <div class="repayAlert1">
            <div class="alert1List1"><div>线下支付宝转账可能会遇到以下几种情况</div><h6>请按照指引操作</h6></div>
            <div class="alert1List2">1、对方账号认证</div>
            <img src="../img/repayBg2.png" class="alert1Img">
            <div class="alert1List3">请补全账号信息，输入“ <a>陕</a>”字，并点击确认</div>
            <div class="next">我知道了</div>
        </div>
    </div>

    <div class="alert22">
        <div class='layer_mask'></div>
        <div class="repayAlert2">
        	<div class="alert2List1"><div>线下支付宝转账可能会遇到以下几种情况</div><h6>请按照指引操作</h6></div>
            <div class="alert2List2">2、风险提示</div>
            <img src="../img/repayBg3.png" class="">
            <div class="alert2List3">点击<a>【我已核实】</a> ，方可转账</div>
            <img src="../img/repayBg4.png" class="">
            <div class="alert2List4">点击<a>【取消】</a>，方可转账</div>
            <div class="next">我知道了</div>
        </div>
    </div>
    <div class="alert33">
        <div class='layer_mask'></div>
        <div class="repayAlert3">
        	<div class="alert2List1"><div>线下支付宝转账可能会遇到以下几种情况</div><h6>请按照指引操作</h6></div>
            <div class="alert3List3">首先,请登录手机支付宝,点击【我的】— 头像右边的展开箭头>【个人主页】查询到当前登录的支付宝账户。</div>
            <div class="next">我知道了</div>
        </div>
    </div>
</body>
    <!-- 脚本sd -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script src="../js/upload.js?rev=@@hash"></script>
    <script src="../js/clipboard.min.js"></script>
    <script>
        !function(global, layer, userUtil, dataUtil){
            $("body").height(document.documentElement.clientHeight);
            var sessionId =userUtil.sid();
            var orderNo;
            if(global.query){
                orderNo=global.query['orderNo'];
            }
            // 上传图片
            !function () {
                new PicUpLoad("flContractPhoto", {
                    formUrl:global.localUrl+'wallet/upload/imageUpload',
                    formData: {type:"OFF_LINE_REFUND_IMAGE",sessionId:userUtil.sid()},
                    onFileRead: function (fileObj) {
                        canUpload = true;
                        var $p = $("<div class=\"photo_wap\"><div class=\"photo\"><input type=\"hidden\" class=\"photo_url\"/><img class=\"photo_bg\" /><div class=\"photo_upload\"><div class=\"photo_upload_progress\"><div class=\"photo_upload_bar\"><i></i></div><p class=\"photo_upload_txt\">正在读取文件</p></div><div class=\"photo_upload_cancel\"></div></div></div></div>");
                        $p.find(".photo_upload_cancel").on("click", function () { _remove($p); });
                        $p.insertBefore($("#btnAddPhoto").parents(".photo_wap"));
                        photoLimit();
                        fileObj.domBar = $p;
                    },
                    onLoadStart: function (e, fileObj) {
                        var $p = fileObj.domBar;
                        $p.find(".photo_upload_cancel ").hide();
                        _showProgress($p);
                    },
                    onProgress: function (e, fileObj) {
                        var $p = fileObj.domBar;
                        var _loaded = e.loaded;
                        var _total = e.total;
                        var _per = Math.floor(100 * _loaded / _total);
                        _showProgress($p, _per);
                    },
                    onSuccess: function (re, fileObj) {
                        var $p = fileObj.domBar;
                        $p.find(".photo_upload_progress ").hide();
                        $p.find(".photo_upload_cancel ").show();
                        $p.find(".photo_url").val(re.data.url);

                        if (0 == $p.find(".photo_img").length) {
                            $p.find(".photo_bg").after("<img class=\"photo_img\" />");
                        }
                        $p.find(".photo_img").attr("src", fileObj.localUri);
                    },
                      onFail: function (re, fileObj) {
                          layer.tips("上传失败，请稍后重试");
                          _remove(fileObj.domBar);
                      },
                      onError: function (fileObj) {
                          layer.tips(global.netError);
                          _remove(fileObj.domBar);
                      }
                }).init();

                function _showProgress($p, per) {
                    if (per) {
                        per = 100 == per ? 99 : per;  //容错上传100%卡住的情况
                        $p.find(".photo_upload_bar i").css("width", per + "%");
                        $p.find(".photo_upload_txt").text("正在上传 " + per + "%");
                    } else {
                        $p.find(".photo_upload_bar i").css("width", "0");
                        $p.find(".photo_upload_txt").text("正在准备上传");
                    }
                }

                function _remove($p) {
                    $p.remove();
                    photoLimit();
                }
            }();

            // 获取页面数据
            function getModel() {
                var _arr = [];
                $(".photos .photo").each(function (k, v) {
                    if (!$(v).hasClass("btn_add_photo")) {
                        var _url = $(v).find(".photo_url").val();
                        if (_url) {
                            _arr.push(_url);
                        } else {
                            _arr.push("");
                        }
                    }
                });
                return {
                    uploadImages: _arr
                }
            };

          // 反馈字数计算
          $("#feedText").keyup(function(){
            $("#feedCount").text($("#feedText").val().length);
          });
          // 控制最多传几张图片
          function photoLimit() {
              var _max = 3;
              if ($(".photos .photo").length >= _max + 1) {
                  $("#btnAddPhoto").parents(".photo_wap").hide();
              } else {
                  $("#btnAddPhoto").parents(".photo_wap").show();
              }
          }

          $(".submitBtn").click(function(){
                $(".submitBtn").off("click");
                var imagess=getModel().uploadImages.join("|");
                var _data={
                    "sessionId": sessionId,
                    "orderNo": orderNo,
                    "alipayNo": $("#alipayNo").val(),
                    "images": imagess,
                    "offineRefundType":1
                }
                var zhifubao=$("#alipayNo").val();
                if(!zhifubao||!imagess){
                    layer.tips("参数不全，请输入支付宝账号并上传图片");
                    setTimeout(function(){
                        window.location.reload();
                    },2000);
                    return;
                }
                $.ajax({
                    url: global.localUrl + "wallet/orders/offlineRefund",
                    type: "post",
                    data: JSON.stringify(_data),
                    contentType: 'application/json;charset=utf-8',
                    success: function (re) {
                        if (1 == re.code) {
                            layer.tips("提交成功");
                            setTimeout(function(){
                                window.location.href="../index.html";
                            },2000);
                        }
                        else{
                            setTimeout(function(){
                                window.location.reload();
                            },2000);
                            layer.tips(re.message);
                        }
                    },
                    error: function () {
                        layer.tips(global.netError);
                    }
                });
          })


            //初始化线下还款信息
            function offlineRepay(){
                var _data={
                    "sessionId": sessionId,
                    "orderNo": orderNo,
                    "offineRefundType":1
                }
                $.ajax({
                    url: global.localUrl + "wallet/orders/offlineRefundApply",
                    type: "post",
                    data: JSON.stringify(_data),
                    contentType: 'application/json;charset=utf-8',
                    success: function (re) {
                        if (1 == re.code) {
                            $(".orderValue").eq(0).html(re.data.refundAmount);
                            $(".orderValue").eq(1).html(re.data.refundTime);
                            $(".orderValue").eq(2).html(re.data.orderNo);
                            $(".repaymengtInfList").eq(2).html(re.data.sysChannelAccountResponse.alipayName);
                            $(".repaymengtInfList>div").html(re.data.sysChannelAccountResponse.alipayNo);

                        }
                        else{

                            layer.tips(re.message);
                        }
                    },
                    error: function () {
                        layer.tips(global.netError);
                    }
                });
            }
            offlineRepay();


            // 弹窗示例、提醒
            $(".orderTips a").click(function(){
                window.location.href= global.localUrl + "trust/simple_zhifubao.html";
            })

            $('.orderNum i').click(function(){
                $(".alert33").css({"display":"block"})
            })

            //初始化页面时候的弹窗提醒
            $(".repayAlert1 .next").click(function(){
                $(".alert11").css({"display":"none"});
                $(".alert22").css({"display":"block"})
            })
            $(".repayAlert2 .next").click(function(){
                $(".alert22").css({"display":"none"})
            })
            $(".repayAlert3 .next").click(function(){
                $(".alert33").css({"display":"none"})
            })

            //一键复制
            $(".repaymengtInfList button").click(function(){
                var clipboard = new ClipboardJS("#id_copy");
                 layer.tips("复制成功")
                clipboard.on("success",function (element) {//复制成功的回调
                });
                clipboard.on("error",function (element) {//复制失败的回调
                })
            })
        }(global, layer, userUtil, dataUtil)

    </script>
</html>